<form class="layui-form layui-form-pane" lay-filter="FormSysPageConfigEdit" action="/sys/page/config/edit">
    <input type="hidden" id="pageCode" name="pageCode" th:value="${pageCode}">
    <input type="hidden" id="fields" name="fields" value="">
    <div class="layui-row p-l-sm m-b-xl">
        <div class="layui-row">
            <div th:class="|layui-inline layui-col-md6 p-tr-sm|">
                <label class="layui-form-label" th:text="系统编号" title="系统编号"></label>
                <div class="layui-input-block">
                    <input class="layui-input layui-bg-gray" autocomplete="off" type="text" th:value="${sysSystem.systemCode}">
                </div>
            </div>
            <div th:class="|layui-inline layui-col-md6 p-tr-sm|">
                <label class="layui-form-label" th:text="页面编号" title="页面编号"></label>
                <div class="layui-input-block">
                    <input class="layui-input layui-bg-gray" autocomplete="off" type="text" th:value="${pageCode}">
                </div>
            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title space-10">
            <legend>页面字段</legend>
        </fieldset>
        <div class="layui-row">
            <div class="layui-form-item p-r-sm">
                <input th:each="item,status:${fieldArray}" lay-filter="fieldItemName" type="checkbox" class="fieldItemName" name="fieldItemName" th:value="${item}" th:title="${item}"
                       th:checked="${fieldsConfig.get(item)}=='1'">
            </div>
        </div>
    </div>
</form>
<script>
    layui.use(["jquery", 'form'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        form.render();
        let arr_box = [];
        $('input[lay-filter=fieldItemName]:checked').each(function () {
            arr_box.push($(this).val());
        });
        $("#fields").val(arr_box.toString())
        form.on('checkbox(fieldItemName)', function (data) {
            let oldFields = $("#fields").val() || ',,';
            if (!oldFields.startsWith(",")) {
                oldFields = "," + oldFields;
            }
            if (!oldFields.endsWith(",")) {
                oldFields = oldFields + ",";
            }
            if (data.elem.checked) {
                if (!oldFields.includes("," + data.value + ",")) {
                    oldFields = oldFields + data.value + ",";
                }
            } else {
                if (oldFields.includes("," + data.value + ",")) {
                    oldFields = oldFields.replace("," + data.value + ",", ",");
                }
            }
            $("#fields").val(oldFields);
        });
    });
</script>